<template>
  <t-row style="background-color: white;margin-top: 10px;">
    <t-col :span="11">

    </t-col>
    <t-col :span="1">
      <div style="padding-top: 10px;padding-bottom: 10px;"> <t-button theme="primary" variant="base"
          @click="showAddDialog">添加部门</t-button></div>
    </t-col>
  </t-row>
  <t-table row-key="id" :columns="columns_1" :data="data" :expanded-row-keys="expandedRowKeys1" :expandIcon="expandIcon"
    :expandOnRowClick="expandOnRowClick" table-layout="auto" :horizontalScrollAffixedBottom="true"
    tableContentWidth="1200" lazyLoad resizable @expand-change="rehandleExpandChange1">
    <template #expandedRow="{ row }">
      <t-table row-key="id" :columns="columns_1" :data="row.children" :expanded-row-keys="expandedRowKeys2"
        :expandIcon="expandIcon" :expandOnRowClick="expandOnRowClick" table-layout="auto" :showHeader="showHeader"
        :horizontalScrollAffixedBottom="true" tableContentWidth="1200" lazyLoad resizable
        @expand-change="rehandleExpandChange2">
        <template #op="{ row }">
          <t-space>
            <t-button variant="outline" theme="danger" ghost @click.stop="delDept(row.id)">删除</t-button>
            <t-button variant="outline" theme="primary" ghost @click.stop="edit(row.id)">编辑</t-button>
          </t-space>
        </template>
        <template #expandedRow="{ row }">
          <t-space>
            <t-tag theme="primary" closable @close="delDept(item.id)" v-for="(item, index) in row.children"
              :key="item.id">{{
                item.deptName }}</t-tag>
          </t-space>
        </template>
      </t-table>
    </template>
  </t-table>

</template>
<script setup lang="js">
import { ref, watch } from 'vue'
import columns_1 from '../columns_1'
import Decimal from 'decimal.js'
import { del } from '@/api/dept_api'
const props = defineProps(['data'])
const emits = defineEmits(['showAddDialog', 'refresh'])

const expandedRowKeys1 = ref([])
const expandedRowKeys2 = ref([])
const expandedRowKeys3 = ref([])
const expandOnRowClick = ref(true)
const expandIcon = ref(true)
const showHeader = ref(false)

// watch(
//   () => props.data,
//   (newVal) => {
//     console.log("填充了", newVal);

//     // 递归解决大id问题

//   }
// )

const delDept = async (id) => {
  console.log("删除：" + id);
  await del(id)

  emits('refresh')
}

// 点击顶层表格项目
const rehandleExpandChange1 = (value, params) => {
  expandedRowKeys1.value = value;
  console.log('rehandleExpandChange', params);
}

// 点击二级表格
const rehandleExpandChange2 = (value, params) => {
  let arry = []
  if (value.length > 1) {
    arry.push(value[value.length - 1])
    expandedRowKeys2.value = arry
  } else {
    expandedRowKeys2.value = value
  }
}

// 显示添加对话框
const showAddDialog = () => {
  emits('showAddDialog')
}
</script>